<template>
	<div class="container">
		<div class="title_wrapper">
			<div class="title_back_icon" @click="backPage">
				<el-tooltip class="item" effect="dark" content="返回" placement="bottom">
					<el-icon class="icon_back"><Back /></el-icon>
				</el-tooltip>
			</div>
			<div class="title_name">{{state.accountName}}</div>
			<div class="title_edit">
				<el-tooltip class="item" effect="dark" content="统计" placement="bottom">
					<el-icon class="icon_back"><PieChart /></el-icon>
				</el-tooltip>
			</div>
		</div>
		
		<div class="container-layout-padding">
			<div class="container-layout-padding-auto container-layout-padding-view">
				<div class="account_amount_text">余额</div>
				<div class="account_amount_value">{{ state.amount }}</div>
			</div>
		</div>
		
		<div class="amount_transaction" v-for="ele in state.mouthTransactions" :key="ele.transactionYearMouth">
			<div class="amount-layout-padding">
				<div class="amount-layout-padding-auto amount-layout-padding-view">
					<div @click="changeShow(ele.transactionYearMouth, ele.isShow)" class="mouthItem">
						<div class="year_mouth_text">{{ele.transactionYearMouth}}</div>
						<div class="amount_container">
							<div>流出：{{ele.totalIncome.toFixed(2)}}</div>
							<div>流入：{{ele.totalExpense.toFixed(2)}}</div>
						</div>
						<div class="open_icon">
							<el-icon><ArrowDown v-if="ele.isShow" /> <ArrowLeft v-else /></el-icon>
						</div>
					</div>
					<div v-show="ele.isShow">
						<el-divider style="" />
						<template v-for="(item, index) in ele.mouthTransactionsItemList">
						
						<div class="detailItem" @click="() => detailItemInfoHandle(item)">
							<div class="circle_container">
								<div class="circle" :style="'background-color: ' + (item.transactionType == 1 ? '#eb595e' : '#25b87a')"></div>
							</div>
							<div class="desc_container">
								<div>{{item.categoryName}}</div>
								<div class="mouth_day_text">{{item.transactionMouthDay}} {{item.description}}</div>
							</div>
							<div class="amount_container">
								<div class="amount_value_text" :style="'color: ' + (item.transactionType == 1 ? '#f08488' : '#25b87a') + ''">
									<span>{{item.transactionType == 1 ? '-' : '+'}}</span>
									<span>{{item.amount.toFixed(2)}}</span>
								</div>
								<div class="account_name">
									{{state.accountName}}
								</div>
							</div>
						</div>
							<el-divider v-if="index !== ele.mouthTransactionsItemList.length - 1" />
						</template>
						
					</div>
				</div>
			</div>
		</div>
		
		<DetailDialog :record="{}" ref="detailDialogRef" />
		
	</div>
</template>

<script setup lang="ts" name="systemAccountDetails">
import { Back, Refresh, PieChart, ArrowDown, ArrowLeft } from "@element-plus/icons-vue";
import {getUserAccountTransactionInfo} from "/@/api/account/accTransactions";
import DetailDialog from "/@/views/account/accAccounts/components/DetailDialog.vue";

// 路由
const router = useRouter()

// 弹窗引用
const detailDialogRef = ref(null);

// 获取传递过来的参数
// 路由变量
const route = useRoute();

// 获取通过 state 传递的参数
const accountId = route.params?.accountId;

// 定义变量
const state = reactive({
	accountId: -1,
	accountName: '',
	amount: 0,
	show: true,
	mouthTransactions: [],
})

const detailItemInfoHandle = (record: any) => {
	console.log('handling detail', detailDialogRef.value)
	detailDialogRef?.value?.open(record)
}

const changeShow = (transactionYearMouth: string, isShow: boolean) => {
	state.mouthTransactions.forEach(item => {
		if (item.transactionYearMouth == transactionYearMouth) {
			item.isShow = !item.isShow
			console.log(item)
		}
	})
}

// 根据ID查询总信息
const queryAccountInfo = () => {
	console.log('queryAccountInfo', accountId)
	getUserAccountTransactionInfo({
		accountId: accountId
	}).then(res => {
		console.log(res)
		const {data} = res
		state.accountId = data.account.accountId
		state.accountName = data.account.accountName
		state.amount = data.account.amount
		state.mouthTransactions = data.mouthTransactions
		
		state.mouthTransactions.forEach((item: any, index: Number) => {
			let isShow = false
			if (index == 0) isShow = true
			item.isShow = isShow
		})
	})
}

// 页面挂载函数
onMounted(() => {
	queryAccountInfo()
})

const backPage = () => {
	router.back()
}
</script>

<style lang="scss" scoped>
.title_wrapper {
	display: flex;
	align-items: center;
	
	background: var(--el-color-white);
	width: 100%;
	height: 70px;
	border-radius: 2px;
	border: 1px solid var(--el-border-color-light, #ebeef5);
	overflow: hidden;
	
	.title_back_icon {
		position: relative; /* 确保伪元素以这个容器为参照 */
		font-size: 30px;
		cursor: pointer;
		margin-left: 20px;
		
		/* 阴影的伪元素 */
		&::before {
			content: '';
			position: absolute;
			width: 60px; /* 阴影直径 */
			height: 60px;
			border-radius: 50%; /* 圆形阴影 */
			background-color: rgba(0, 0, 0, 0.1); /* 初始阴影颜色 */
			opacity: 0; /* 初始隐藏 */
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%); /* 中心对齐 icon */
			transition: opacity 0.3s ease, transform 0.3s ease; /* 添加平滑效果 */
			z-index: 0; /* 确保在 icon 下方 */
		}
		
		/* 鼠标悬停时的效果 */
		&:hover::before {
			opacity: 1; /* 显示阴影 */
			background-color: rgba(0, 0, 0, 0.2); /* 阴影颜色加深 */
			transform: translate(-50%, -50%) scale(1.1); /* 适当放大 */
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加立体效果 */
		}
		
		/* 确保 icon 在最上层 */
		.icon_back {
			position: relative;
			z-index: 1; /* 覆盖伪元素 */
		}
	}

	
	.title_name {
		flex: 10;
		text-align: left;
		padding-left: 30px;
		font-size: 18px;
		font-weight: bold;
	}
	
	.title_edit {
		flex: 1;
		text-align: right;
		margin-right: 10px;
	}
}

.container-layout-padding {
	padding: 10px 15px 5px 15px !important;

	height: 100px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	flex: 1;
	&-auto {
		height: inherit;
		display: flex;
		flex-direction: column;
		flex: 1;
		padding: 10px;
	}
	&-view {
		background: var(--el-color-white);
		width: 100%;
		height: 100%;
		border-radius: 8px;
		border: 1px solid var(--el-border-color-light, #ebeef5);
		overflow: hidden;
		
		
		.account_amount_text {
			font-size: 16px;
			color: #99a1a9;
			text-align: center;
		}
		
		.account_amount_value {
			font-size: 25px;
			font-weight: bold;
			color: #f08488;
			text-align: center;
		}
	}
}

.amount_transaction {
	.amount-layout-padding {
		padding: 10px 15px 5px 15px !important;
		
		overflow: hidden;
		display: flex;
		flex-direction: column;
		flex: 1;
		&-auto {
			height: inherit;
			display: flex;
			flex-direction: column;
			flex: 1;
			padding: 10px 0 0 0;
		}
		&-view {
			background: var(--el-color-white);
			width: 100%;
			height: 100%;
			border-radius: 8px;
			border: 1px solid var(--el-border-color-light, #ebeef5);
			overflow: hidden;
			
			::v-deep .el-divider--horizontal {
				margin: 0 !important;
			}
			
			.mouthItem {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding-bottom: 10px;
				
				.amount_container {
					flex: 0 1 100px;
					text-align: right;
					font-size: 10px;
				}
				
				.open_icon {
					flex: 0 1 30px;
					margin-left: 10px;
				}
				
				.year_mouth_text {
					flex: 1;
					margin-left: 10px;
					font-weight: bold;
					font-size: 14px;
					font-family: MiSans-Demibold;
				}
			}
			
			.detailItem {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin: 10px 0;
				.circle_container {
					flex: 0 1 30px;
					.circle {
						width: 6px;
						height: 6px;
						border-radius: 50%;
						background-color: #25b87a;
						margin-left: 10px;
						margin-right: 20px;
					}
				}
				
				.desc_container {
					flex: 1;
					
					.mouth_day_text {
						font-size: 12px;
						color: #9b9da1;
					}
				}
				.amount_container {
					flex: 0 1 100px;
					text-align: right;
					margin-right: 15px;
					
					.amount_value_text {
						color: #25b87a;
						font-size: 16px;
					}
					
					.account_name {
						font-size: 12px;
						color: #9b9da1;
					}
				}
			}
		}
	}
}
</style>
